<template>
	<view class="bar" v-if="barList.length">
		<u-notice-bar mode="vertical" :list="barList" type="success"></u-notice-bar>
	</view>
</template>

<script>
	import {
		toRefs,
		reactive,
		onMounted
	} from 'vue'
	import api from '@/axios/http.api.js'
	export default {
		name: "bar",
		props: {
			type: {
				type: Number,
				required: true,
				default: 0
			},
		},
		setup(props) {
			const state = reactive({
				barList: []
			})
			const methods = {
				barContent: async (param) => {
					let res = await api.barContent(param)
					if (res.code) {
						return
					}
					state.barList = res.data.map((item) => item.content)
				}
			}
			onMounted(() => {
				methods.barContent({
					type: props.type
				})
			})

			return {
				...toRefs(state),
				...methods
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100vw;
	}
</style>